<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>注册</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="shortcut icon" type="image/x-icon" href="https://wwl.ycws.cc/image/backgroundimage/e.ico">
	<style type="text/css">
		#preview1{width:170px;height:190px;border:1px solid white;overflow:hidden; text-align: center;}
		#preview2{width:170px;height:190px;border:1px solid white;overflow:hidden; text-align:center;}
		#preview3{width:170px;height:190px;border:1px solid white;overflow:hidden; text-align:center;}
		/* #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);} */
	</style>
	<script src="js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
       	//人脸检测图片上传预览1
         function previewImage1(file){
         	var files = $("#filepath1").prop("files");
         	var formData =new FormData();
         	formData.append("file",files[0]);
         	var filepath1=document.getElementById('filepath1').value;		//获取文件路径
         	var newfilepath1 =filepath1.substring(filepath1.indexOf('.'));
         	var jpg='.jpg',png='.png',jpeg='.jpeg',gif='.gif';
         	if(jpg == newfilepath1 || png==newfilepath1 || jpeg == newfilepath1 || gif==newfilepath1){
         		$.ajax({
  					url:"<%=path%>/pc_face/detection",
  					fileElementId:"filepath1",
  					data:formData,
  					type:"post",
  					async:false,
  					processData:false,
  					contentType:false,
  					success:function(date){
  					var s=JSON.parse(date);
  					if(s.error_message=="CONCURRENCY_LIMIT_EXCEEDED"){
  						alert("系统上传有误，请重试");
  					}else if(s.faces.length == 0){
  						alert("不是人脸图片");
  						document.getElementById('filepath1').value="";	//清除图片路径
  					}else if(s.faces.length>=1){
			          	var div = document.getElementById('preview1');
			          	if (file.files && file.files[0]){
				            div.innerHTML ='<img id=imghead1>';
				            var img = document.getElementById('imghead1');
				            img.onload = function(){
			                var rect = clacImgZoomParam(260, 180, img.offsetWidth, img.offsetHeight);
			                img.width  =  rect.width;
			                img.height =  rect.height;
			                img.style.marginTop = rect.top+'px';
			           	};
				            var reader = new FileReader();
				            reader.onload = function(evt){
				            img.src = evt.target.result;
				        };
				            reader.readAsDataURL(file.files[0]);
			          	}else{//兼容IE
				            file.select();
				            var src = document.selection.createRange().text;
				            div.innerHTML = '<img id=imghead>';
				            var img = document.getElementById('imghead');
				            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
				            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
				            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
				            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
			          	}	
  					}
  					},
  					error:function(date){
  				}
  			});  
         	}else{
         		alert("不是图片");
         		document.getElementById('filepath1').value="";
         	}
        }
        
        //人脸检测图片上传预览2
         function previewImage2(file){
         	var files = $("#filepath2").prop("files");
         	var formData =new FormData();
         	formData.append("file",files[0]);
         	var filepath2=document.getElementById('filepath2').value;		//获取文件路径
         	var newfilepath2 =filepath2.substring(filepath2.indexOf('.'));
         	var jpg='.jpg',png='.png',jpeg='.jpeg',gif='.gif';
         	if(jpg == newfilepath2 || png==newfilepath2 || jpeg == newfilepath2 || gif==newfilepath2){
         		$.ajax({
  					url:"<%=path%>/pc_face/detection",
  					fileElementId:"filepath2",
  					data:formData,
  					type:"post",
  					async:false,
  					processData:false,
  					contentType:false,
  					success:function(date){
  					var s=JSON.parse(date);
  					if(s.error_message=="CONCURRENCY_LIMIT_EXCEEDED"){
  						alert("系统上传有误，请重试");
  					}else if(s.faces.length == 0){
  						alert("不是人脸图片");
  						document.getElementById('filepath2').value="";	//清除图片路径
  					}else if(s.faces.length>=1){
			          	var div = document.getElementById('preview2');
			          	if (file.files && file.files[0]){
				            div.innerHTML ='<img id=imghead2>';
				            var img = document.getElementById('imghead2');
				            img.onload = function(){
			                var rect = clacImgZoomParam(260, 180, img.offsetWidth, img.offsetHeight);
			                img.width  =  rect.width;
			                img.height =  rect.height;
			                img.style.marginTop = rect.top+'px';
			           	};
				            var reader = new FileReader();
				            reader.onload = function(evt){
				            img.src = evt.target.result;
				        };
				            reader.readAsDataURL(file.files[0]);
			          	}else{//兼容IE
				            file.select();
				            var src = document.selection.createRange().text;
				            div.innerHTML = '<img id=imghead>';
				            var img = document.getElementById('imghead');
				            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
				            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
				            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
				            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
			          	}	
  					}
  					},
  					error:function(date){
  				}
  			});  
         	}else{
         		alert("不是图片");
         		document.getElementById('filepath1').value="";
         	}
        }
        
         //人脸检测图片上传预览3
         function previewImage3(file){
         	var files = $("#filepath3").prop("files");
         	var formData =new FormData();
         	formData.append("file",files[0]);
         	var filepath3=document.getElementById('filepath3').value;		//获取文件路径
         	var newfilepath3 =filepath3.substring(filepath3.indexOf('.'));
         	var jpg='.jpg',png='.png',jpeg='.jpeg',gif='.gif';
         	if(jpg == newfilepath3 || png==newfilepath3 || jpeg == newfilepath3 || gif==newfilepath3){
         		$.ajax({
  					url:"<%=path%>/pc_face/detection",
  					fileElementId:"filepath3",
  					data:formData,
  					type:"post",
  					async:false,
  					processData:false,
  					contentType:false,
  					success:function(date){
  					var s=JSON.parse(date);
  					if(s.error_message=="CONCURRENCY_LIMIT_EXCEEDED"){
  						alert("系统上传有误，请重试");
  					}else if(s.faces.length == 0){
  						alert("不是人脸图片");
  						document.getElementById('filepath3').value="";	//清除图片路径
  					}else if(s.faces.length>=1){
			          	var div = document.getElementById('preview3');
			          	if (file.files && file.files[0]){
				            div.innerHTML ='<img id=imghead3>';
				            var img = document.getElementById('imghead3');
				            img.onload = function(){
			                var rect = clacImgZoomParam(260, 180, img.offsetWidth, img.offsetHeight);
			                img.width  =  rect.width;
			                img.height =  rect.height;
			                img.style.marginTop = rect.top+'px';
			           	};
				            var reader = new FileReader();
				            reader.onload = function(evt){
				            img.src = evt.target.result;
				        };
				            reader.readAsDataURL(file.files[0]);
			          	}else{//兼容IE
				            file.select();
				            var src = document.selection.createRange().text;
				            div.innerHTML = '<img id=imghead>';
				            var img = document.getElementById('imghead');
				            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
				            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
				            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
				            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
			          	}	
  					}
  					},
  					error:function(date){
  				}
  			});  
         	}else{
         		alert("不是图片");
         		document.getElementById('filepath1').value="";
         	}
        }
        function clacImgZoomParam( maxWidth, maxHeight, width, height ){
            var param = {top:0, left:0, width:width, height:height};
            if( width>maxWidth || height>maxHeight ){
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;
                if( rateWidth > rateHeight ){
                    param.width =  maxWidth;
                    param.height = Math.round(height / rateWidth);
                }else{
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }
</script> 
<script type="text/javascript">
		$(document).ready(function(){
			$("#add").click(function(){
				var reg=/^1[3|5|7|8]\d{9}$/;
				//获取id的value值
				var filepath1=$("#filepath1").val();
				var filepath2=$("#filepath2").val();
				var filepath3=$("#filepath3").val();
				var yname=$("#yname").val();
				var yphone=$("#yphone").val();
				var ydetailed=$("#ydetailed").val();
				//判断上传要求
				if(filepath1 == "" || filepath2 == "" || filepath3 ==""){
					alert("请选择上传图片");
				}else if(yname == ""){
					alert("请输入姓名");
				}else if(!reg.test(yphone)){
					alert("手机号码不符");
				}else if(ydetailed == ""){
					alert("请选择单元楼");
				}else{
					$("#addform").submit();
				}
			}); 
		});
</script>
<style type="text/css">
#font{
	color: white;
}
</style>
	</head>
	<body>
	<div align="center">
		<div style="padding-right: 1000px;"><img src="images/eanquan.png">&nbsp;&nbsp;注册账号</div>
  
  		<div style="height: 10px;"></div>
		<div style="background:url(images/005.jpg) no-repeat; height:80%; background-size:100%;">

	<div>
  	<c:if test="${result==1}">
  		<div style="padding-top:100px; padding-left:350px;">
    	<form id="addform" action="<%=path%>/pc/uploadfile" method="post" enctype="multipart/form-data">
    		<table  cellpadding="0" cellspacing="0" align="left" border="0">
    		<tr>
    			<td colspan="3"><font id="font"><img src="images/001.png" height="15px" width="15px">&nbsp;请输入您的注册信息</font></td>
    		</tr>
       		<tr>
				<td>
					<div id="preview1"><img id="imghead1"></div>
				</td>
				<td>
					<div id="preview2"><img id="imghead2"></div>
				</td>
				<td>
					<div id="preview3"><img id="imghead3"></div>	
				</td>
			</tr>
			<tr>
				<td>
					<input type="file" name="filepath" id="filepath1" value="" onchange="previewImage1(this)" style="width: 180px;"/>
				</td>
				<td>
					<input type="file" name="filepath" id="filepath2" value="" onchange="previewImage2(this)" style="width: 180px;"/>
				</td>
				<td>
					<input type="file" name="filepath" id="filepath3" value="" onchange="previewImage3(this)" style="width: 180px;"/>
				</td>
			</tr>
    		<tr>
	    		<td height="70" align="right" ><font id="font">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</font></td>
	    		<td colspan="2" align="left">
	    			<input type="text" name="yname" id="yname" value="" style="width: 270px; height: 30px;"/>
	    		</td>
    		</tr>
    		<tr>
	    		<td height="70" align="right"><font id="font">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</font></td>
	    		<td colspan="2" align="left">
	    			<select name="ysex" style="width: 270px; height: 30px;">
	    				<option>男</option>
	    				<option>女</option>
	    			</select>
	    		</td>
    		</tr> 
    		<tr>
    		<td height="70" align="right"><font id="font">手机&nbsp;&nbsp;号码:</font></td>
	    		<td  colspan="2" align="left">
	    			<input type="text" name="yphone" id="yphone" value="<%=request.getParameter("phone")%>"  style="width:270px; height:30px;" />
	    		</td>
    		</tr>    			
    		<tr>
	    		<td height="70" align="right"><font id="font">单元/楼/室:</font></td>
	    		<td  colspan="2" align="left">
	    			<input type="text" name="ydetailed" id="ydetailed" value="" style="width:270px; height:30px;"/>
	    		</td>
    		</tr>
    		<!-- <tr align="center"><td colspan="3"><input type="submit" id="add" value="提交"/></td></tr> -->
    		<tr align="center">
    			<td colspan="3" height="70px;">
    				<input type=button id="add" value="提交" style="width: 360px; height: 40px; background-color: red; color: white; font-size: 20px;"/>
    			</td>
    		</tr>
    		</table>
    			<input type="hidden" name="ynumber" value =""/>
    	</form>
    	</div>
    	</c:if>
    	<c:if test="${empty result}">
  		<a href="login.jsp">请登录</a>
  		</c:if> 
  		</div>
  	</div>	
		  <p style="height:15px;"></p>
		  <p>咨询电话：0755-86133729　　公司地址：广东省深圳市龙华新区留仙大道24号彩悦大厦10楼</p>
		  <p>&copy;   2013-2015深圳市万物联有限公司版权所有　　丨　　　粤ICP备13071979号-2</p>
  	</div>
  </body>
</html>
